
// 获取节点
const input1 = document.getElementById('user');
const input2 = document.querySelector('#age');
const selects = document.querySelectorAll('select');
const btn1 = document.querySelector('#btn');
const btn_OK=document.querySelector('#OK');
console.log(btn_OK);

const tbody = document.querySelector('tbody');
const btn_gehang = document.querySelector('.gehang');
const btn_removes = document.querySelector('.removes');
const btn_searchs = document.querySelector('.searchs');
const input3 = document.querySelector('#put');

const h1s = document.querySelectorAll('h1');
const divs = document.querySelectorAll('.down>div');

// 判断loacation是否有值
const data = localStorage.getItem('data') ? JSON.parse(localStorage.getItem('data')) : [];

// 判断初始化是否需要渲染
if (data.length > 0) {
    show()
}

//tab切换
h1s.forEach((item, i) => {
    item.onclick = function () {
        // 数组每一项都去除样式
        h1s.forEach((item) => (item.classList.remove('active')));
        divs.forEach((item) => (item.classList.remove('show')));
        console.log(i);
        // 当前点击的元素添加样式
        h1s[i].classList.add('active');
        divs[i].classList.add('show');
    };
});

// 渲染
function show() {
    tbody.innerHTML = '';
    data.forEach((item,i) => {
        const { times, name, age, sel } = item;
        tbody.innerHTML += `<tr><td>${i+1}</td><td>${name}</td><td>${age}</td><td>${sel}</td>
    <td><button onclick=del(${item.times})>删除</button>
    <button onclick=edit(${item.times})>修改</button></td></tr>`;

    })
}

//  添加数据
btn1.onclick = function () {
    // 获取输入框的值
    const name = input1.value;
    const age = input2.value;
    //获取select的值
    const sel = selects[0].value;
    const times = new Date().getTime();
    console.log(times);
    //判断输入框是否有值
    if (name && age) {
        data.push({ times, name, age, sel });
        show();
        localStorage.setItem('data', JSON.stringify(data));
    } else {
        alert('请输入完整信息');
    }
}

//删除数据
function del(times) {
    if (!confirm('确定删除吗')) {     
       return alert('取消删除成功');
    }
    // 删除数据
    data.splice(data.findIndex((item) => item.times === times), 1);
    //删除数据后重新渲染
    show();
    //删除数据后重新存储
    localStorage.setItem('data', JSON.stringify(data));
}

// 搜索数据


// 修改数据
function edit(id) {
    // 获取要修改的对象
    let obj =  data.find((item) => item.times === id)
  
    //渲染回去 
    input1.value = obj.name;
    input2.value = obj.age;
    // 调转对应页面
      for(let i=0;i<divs.length;i++){
        h1s[i].classList.remove('active');
        divs[i].classList.remove('show');

     }
     h1s[1].classList.add('active');
     divs[1].classList.add('show');
     btn1.style.display = 'none';
     btn_OK.style.display = 'block';
    
     btn_OK.anum=id
     console.dir(btn_OK);
}

btn_OK.onclick=function(){
    // 获取输入框的值
    const name = input1.value;
    const age = input2.value;
    //获取select的值
    const sel = selects[0].value;
    const times = new Date().getTime();
    console.dir(btn_OK);
    //判断输入框是否有值
    if (name && age) {
        let obj = data.find((item) => item.times === btn_OK.anum);
        obj={
            times:new Date().getTime(),
            name,age,sel
        }
        data.splice(data.findIndex((item) => item.times === btn_OK.anum), 1,obj);
        show()
        localStorage.setItem('data', JSON.stringify(data));
    } else {
        alert('请输入完整信息');
    } 


    // 回到基本信息页
    for(let i=0;i<divs.length;i++){
        h1s[i].classList.remove('active');
        divs[i].classList.remove('show');

     }
     h1s[0].classList.add('active');
     divs[0].classList.add('show');
     

    // 消失完成按钮 显示添加按钮
    btn1.style.display = 'block';
    btn_OK.style.display = 'none';
}


